import React, { useEffect, useRef } from "react";
import { Animated, StyleSheet, Text, View } from "react-native";

export default function LoginSuccessAnimation({ onFinish }: { onFinish: () => void }) {
    const opacity = useRef(new Animated.Value(0)).current;
    const scale = useRef(new Animated.Value(0.5)).current;

    useEffect(() => {
        Animated.parallel([
            Animated.timing(opacity, {
                toValue: 1,
                duration: 800,
                useNativeDriver: true,
            }),
            Animated.spring(scale, {
                toValue: 1,
                friction: 5,
                useNativeDriver: true,
            }),
        ]).start();

        const timeout = setTimeout(() => {
            onFinish();
        }, 1500); // 动画结束后跳转

        return () => clearTimeout(timeout);
    }, []);

    return (
        <View style={styles.overlay}>
            <Animated.View
                style={[
                    styles.successBox,
                    {
                        opacity,
                        transform: [{ scale }],
                    },
                ]}
            >
                <Text style={styles.successText}>✅ Login Success!</Text>
            </Animated.View>
        </View>
    );
}

const styles = StyleSheet.create({
    overlay: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: "#fff",
        justifyContent: "center",
        alignItems: "center",
        zIndex: 1000,
    },
    successBox: {
        backgroundColor: "#4CAF50",
        padding: 24,
        borderRadius: 16,
    },
    successText: {
        fontSize: 20,
        color: "#fff",
        fontWeight: "bold",
    },
});
